<template>
  <div class="pay">
    <van-nav-bar
      title="支付确认"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="one">
      <div>当前影城</div>
      <div>{{ nameList }}</div>
    </div>
    <div class="two">
      <div>已选商品</div>
      <div>{{ name }}</div>
    </div>
    <div class="thr">
      <div>价格</div>
      <div>￥{{ price }}</div>
    </div>
    <!-- <div class="for">支付方式</div>
    <div class="fiv">
      <svg class="xl-icon" aria-hidden="true" style=" font-size:28px;">
        <use xlink:href="#icon-xyk-copy"></use>
      </svg>
      <div>星意卡</div>
      <div @click="$router.push('/xyk')">
        <span>更多</span>
        <van-icon name="arrow" />
      </div>
    </div> -->
    <!-- <div class="sex">
      <div>
        <van-icon name="wechat" color="#31bb70" size="28" />
      </div>
      <div>
        <div>微信支付</div>
        <div>支持储存卡、信用卡</div>
      </div>
      <div>
        <van-checkbox v-model="checked" checked-color="#ee0a24" @click="checked=true"></van-checkbox>
      </div>
    </div> -->

    <van-radio-group v-model="checked">
      <van-cell-group>
        <van-cell clickable @click="checked = 'wxpay'">
          <template #title>
            <div>
              <van-icon name="wechat" color="#31bb70" size="28" /> 微信支付
            </div>
          </template>

          <template #right-icon>
            <van-radio name="wxpay" />
          </template>
        </van-cell>
        <van-cell clickable @click="checked = 'alipay'">
          <template #title>
            <div>
              <van-icon name="alipay" size="28" color="#1989fa" />支付宝
            </div>
          </template>

          <template #right-icon>
            <van-radio name="alipay" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <div>
      <img :src="qrCodeImg" alt="" />
    </div>

    <div class="sev">
      <div>
        待支付:<span>￥{{ price }}</span>
      </div>
      <button @click="pay">确认支付</button>
    </div>
  </div>
</template>

<script>
import { RadioGroup, Radio } from "vant";
import QRCode from "qrcode";
export default {
  data() {
    return {
      checked: "alipay",
      nameList: "",
      name: "",
      price: "",
      qrCodeImg: "",
      orderSn:'' // 订单编号
    };
  },
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  created() {
    this.nameList = localStorage.getItem("shopName");

    this.name = this.$route.query.goods;
    this.price = this.$route.query.money;

    console.log(this.$route);

  //  再次进入这个页面时调用 

  // 

//  监控页面的隐藏事件


document.onvisibilitychange = ()=>{

  console.log(document.hidden)
   if(!document.hidden){

        this.checkPayOrder()
   }

};






  },
  methods: {
    //  检测支付状态
    checkPayOrder(){
      let uni_id_token = localStorage.getItem('xl-token');
      let orderSn = this.orderSn;
      if(!orderSn) return 
      this.$http.post('/order/kh/checkPayOrder',{
        uni_id_token,
        orderSn
      })
      .then(res=>{

        console.log(res)   
        this.$toast('支付成功')
        if(res.code == 0){
          let { orderId } = this.$route.query;
            this.$router.replace(`/paySuccess?orderId=${orderId}`)
        }else{
          //  this.$router.push('/payFail')
        }

      document.onvisibilitychange = null;
       


      
      })
    },
    pay() {
      let { orderId } = this.$route.query;

      let token = localStorage.getItem("xl-token");
      let { checked } = this;
      console.log(checked);

      this.$http
        .post("/order/kh/pay", {
          orderId,
          payType: checked,
          uni_id_token: token,
        })
        .then((res) => {
          console.log(res);

          let {orderInfo ,outTradeNo}= res.data;

          console.log(orderInfo);

          this.orderSn = outTradeNo

          window.open("https://openapi.alipaydev.com/gateway.do?" + orderInfo);









          // orderInfo: "method=alipay.trade.wap.pay&app_id=2021000120604198&charset=utf-8&version=1.0
          // &sign_type=RSA2&timestamp=2022-05-31%2014%3A48%3A58&
          // notify_url=https%3A%2F%2F4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com%2Fhttp%2Fpayment-notify%2Falipay_h5&
          // sign=biJMbQSTOLK2JAf%2FlOCBOz7ZKgCl0grLAUic7CP4EG5f8xljJgJ0%2B8og44s7mU6FvHIsBB%2B4i0dCuIKcH7tUm8847lNXWLJtgASNH%2FApvv4x1lxZgS6yeV2TUKm5%2FTFOLIHsLCh84EW5qnK9DEth8wpRupFYHyS3qEdHpl7u%2BsDvnusNZFfj9muXxnkjdWqdYXRQhBlJ%2BUfjn%2FowBU8OLm%2BdJQG2NipsVpP5f7hqXfV6boUMHaa8LiGrw0SK9o4KDuSZTG6BpqDK005teaAxdsZPZvhhuQWD4Y%2Bil99hKa08TOH8Whi3AINMkowR8PjLInco%2BJlmsgWPowS3fYbs0w%3D%3D&biz_content=%7B%22out_trade_no%22%3A%221653979737247ozyce5napim%22%2C
          // %22subject%22%3A%22%E5%9D%8F%E8%9B%8B%E8%81%94%E7%9B%9F%E7%94%B5%E5%BD%B1%E7%A5%A81%E5%BC%A0%22%2C%22
          // product_code%22%3A%22QUICK_WAP_WAY%22%2C%22total_amount%22%3A0%7D";

          //   只是一个链接  把这个支付宝返回的链接变成二维码  方便支付宝扫码

          // QRCode.toDataURL(codeUrl)
          //   .then(url => {
          //     console.log(url)
          //     this.qrCodeImg = url

          //   })
          //   .catch(err => {
          //     console.error(err)
          //   })
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.pay {
  .one {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 14px;
    border-bottom: 2px solid #e9e9e9;
    div:nth-of-type(2) {
      color: #fc5869;
      font-weight: 700;
    }
  }
  .two {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 14px;
    border-bottom: 2px solid #e9e9e9;
    div:nth-of-type(2) {
      font-size: 12px;
      font-weight: 700;
      color: #444;
    }
  }
  .thr {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 14px;
    border-bottom: 8px solid #e9e9e9;
    div:nth-of-type(2) {
      font-weight: 700;
    }
  }
  .for {
    padding: 0 10px;
    line-height: 38px;
    font-size: 14px;
  }
  .fiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    border-bottom: 2px solid #e9e9e9;
    line-height: 38px;
    div:nth-of-type(1) {
      margin-right: 220px;
    }
  }
  .sex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    border-bottom: 2px solid #e9e9e9;
    line-height: 22px;
    div:nth-of-type(2) {
      font-size: 12px;
      margin-right: 90px;
      div:nth-of-type(2) {
        color: #aaa;
      }
    }
  }
  .sev {
    width: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
    line-height: 38px;
    position: fixed;
    bottom: 0;
    z-index: 2222;
    background-color: #fff;
    div {
      font-size: 12px;
      span {
        color: #fc5869;
        font-size: 16px;
        padding-right: 10px;
      }
    }
    button {
      width: 100px;
      border: #fff;
      background-color: #fc5869;
      color: #fff;
      font-size: 13px;
    }
  }
}
</style>